<template>
	<view class="content">
		<view class="item">
			<view class="code">
				<text>结算单据编号 {{info.sn_code}}</text>
			</view>
			<view class="list">
				<text class="name">结算金额</text>
				<text v-if="info.is_bh<=1">{{(info.goods_price*info.goods_num).toFixed(2)}}</text>
				<text
					v-else>{{(info.purchase_inbound.goods_price*info.purchase_inbound.goods_num).toFixed(2)}}</text>
			</view>
			<view class="list">
				<text class="name">结算单价</text>
				<text v-if="info.is_bh<=1">{{(info.goods_price*1).toFixed(2)}}</text>
				<text v-else>{{(info.purchase_inbound.goods_price*1).toFixed(2)}}</text>
			</view>
			<view class="list">
				<text class="name">数量</text>
				<text v-if="info.is_bh<=1">{{(info.goods_num*1).toFixed(4)}}</text>
				<text v-else>{{(info.purchase_inbound.goods_num*1).toFixed(4)}}</text>
			</view>
			<view class="list">
				<text class="name">单据日期</text>
				<text v-if="info.is_bh<=1">{{info.signer_date}}</text>
				<text v-else>{{info.purchase_inbound.signer_date}}</text>
			</view>
		</view>
		<view class="item" v-if="info.is_bh<=1">
			<view class="code iconbox">
				磅单信息 <view class="icon iconfont icon-guanyu"></view>
			</view>
			<view class="imgbox">
				<view class="title">
					装货单附件
				</view>
				<view class="file" v-for="(item,index) in JSON.parse(info.real_url)" :key='index'>
					<view class="url">{{item}}</view>
					<button class="btn" @tap="previewFile(item)">查看</button>
				</view>
			</view>
			<view class="imgbox">
				<view class="title">
					卸货单附件
				</view>
				<view class="file" v-for="(item,index) in JSON.parse(info.file_url)" :key='index'>
					<view class="url">{{item}}</view>
					<button class="btn" @tap="previewFile(item)">查看</button>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="code iconbox">
				商品信息 <view class="icon iconfont icon-guanyu"></view>
			</view>
			<view class="list">
				<text class="name">商品名称</text>
				<text v-if="info.is_bh<=1">{{info.goods_name}}</text>
				<text v-else>{{info.purchase_inbound.goods_name}}</text>
			</view>
			<view class="list">
				<text class="name">车牌号</text>
				<text v-if="info.is_bh<=1">{{info.car_number}}</text>
				<text v-else>{{info.purchase_inbound.car_number}}</text>
			</view>
			<view class="list">
				<text class="name">实际入库数量</text>
				<text v-if="info.is_bh<=1">{{(info.goods_real_num*1).toFixed(4)}}</text>
				<text v-else>{{(info.purchase_inbound.goods_real_num*1).toFixed(4)}}</text>
			</view>
			<view class="list">
				<text class="name">结算单价(含税)</text>
				<text v-if="info.is_bh<=1">{{(info.goods_price*1).toFixed(2)}}</text>
				<text v-else>{{(info.purchase_inbound.goods_price*1).toFixed(2)}}</text>
			</view>
			<view class="list">
				<text class="name">结算金额(含税)</text>
				<text v-if="info.is_bh<=1">{{(info.goods_price*info.goods_real_num).toFixed(2)}}</text>
				<text
					v-else>{{(info.purchase_inbound.goods_price*info.purchase_inbound.goods_real_num).toFixed(2)}}</text>
			</view>
			<view class="list iptbox">
				<text class="name" style="line-height: 60rpx;">核对结算金额</text>
				<input type="text" placeholder="请输入" placeholder-class="input-style" v-model="info.newPrice"
					v-if="info.is_bh<=1" />
				<input type="text" placeholder="请输入" placeholder-class="input-style" v-model="info.check_amount"
					disabled v-else />
			</view>
			<view class="status">
				<text v-if="info.is_bh==0">未发起</text>
				<text v-if="info.is_bh==1">已驳回</text>
				<text v-if="info.signer_status==1">未对账</text>
				<text v-if="info.signer_status==2">待核对</text>
				<!-- <text v-if="info.signer_status==3||info.signer_status==6">已驳回</text> -->
				<text v-if="info.signer_status==4">核对成功</text>
				<text v-if="info.signer_status==5">审批中</text>
				<text v-if="info.signer_status==7">已通过</text>
				<text v-if="info.signer_status==8">已作废</text>
				<text v-if="info.signer_status==9">付款中</text>
				<text v-if="info.signer_status==10">付款成功</text>
				<text v-if="info.signer_status==11">付款失败</text>
				<text v-if="info.signer_status==12">已开票</text>
				<text v-if="info.signer_status==13">已上传对账单</text>
			</view>
			<view class="sure" @tap="save" v-if="info.is_bh<=1">保存</view>

			<view class="" v-if="info.document_url&&info.signer_status!=13&&info.signer_status<7">
				<view class="list" style="font-weight: 600;">
					<text>请上传对账单</text>
				</view>
				<view class="file">
					<view class="url">
						{{JSDfile}}
					</view>
					<button class="btn" @tap="previewFile(JSDfile)" v-if="JSDfile">查看</button>
					<button class="btn" @tap="JSDfile=''" v-if="JSDfile">删除</button>
				</view>
				<view class="upload" v-if="!JSDfile">
					<uni-icons type="plusempty" size="60" color="#f7f7f7" @tap="choosefile()"></uni-icons>
				</view>
			</view>
			<view class="" v-if="info.document_url&&info.signer_status>=7&&info.signer_status<=12">
				<view class="list" style="font-weight: 600;">
					<text>对账单附件</text>
				</view>
				<view class="file">
					<view class="url">
						{{info.document_url}}
					</view>
					<button class="btn" @tap="previewFile(info.document_url)">查看</button>
				</view>
			</view>
		</view>
		<view class="btnbox"  v-if="info.document_url&&info.signer_status<7">
			<view class="btn search" @tap="submitJSD">提交对账单</view>
			<navigator open-type="navigateBack" hover-class="none" class="btn">返回</navigator>
		</view>
		<view class="btnbox" v-if="info.is_bh<=1">
			<view class="btn search" @tap="submit">提交确认</view>
			<navigator open-type="navigateBack" hover-class="none" class="btn">返回</navigator>
		</view>
	</view>
</template>

<script setup>
	import uploadUrl from '../../../network/utils.js';
	import {
		supplySettlement
	} from '../../../network/main.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	onLoad((res) => {
		let settmentinfo =  JSON.parse(res.info)
		settmentinfo.check_amount = (settmentinfo.check_amount * 1).toFixed(2)
		Object.assign(info,settmentinfo)
		uni.getStorage({
			key: 'settlement',
			success: function(data) {
				let arr = JSON.parse(data.data)
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].id = info.id) {
						info.newPrice = arr[i].newPrice
					}
				}
			}
		})
	})
	const info = reactive({})
	const save = () => {
		let arr = JSON.parse(uni.getStorageSync('settlement'))
		arr.map(item => {
			if (item.id == info.id) {
				item.newPrice = info.newPrice
			}
			return item
		})
		uni.setStorageSync('settlement', JSON.stringify(arr))
		uni.showToast({
			title: '保存成功',
			icon: 'none'
		})
	}
	const submit = () => {
		let arr = JSON.parse(uni.getStorageSync('settlement'))
		let list = [];
		let obj = {
			amount: info.newPrice,
			settlement_id:info.id
		}
		// if(info.is_bh==0){
		// 	obj.purchase_inbound_id = info.id;
		// }else{
		// 	obj.settlement_id = info.id;
		// }
		list.push(obj)
		let data = {
			data: list
		}
		supplySettlement(data).then(res => {
			let index = arr.findIndex((item) => item.id == info.id)
			arr[index].checked = true;
			let arr2 = arr.filter(item => {
				return item.checked == false
			})
			uni.setStorageSync('settlement', JSON.stringify(arr2))
			uni.showToast({
				title: '提交成功'
			})
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				})
			}, 300)
		})
	}
	const JSDfile = ref('')
	const choosefile = () => {
		// #ifdef  APP-PLUS
		let fileTypes = ["doc", "docx", "xls", "xlsx", "pdf", "txt", "pptx"]
		let chooseFile = plus.io.chooseFile({
			title: '选择文件',
			filetypes: fileTypes,
			multiple: false
		}, (e) => {
			uni.uploadFile({
				url: uploadUrl.uploadUrl,
				filePath: e.files[0],
				name: 'file',
				header: {
					'token': uni.getStorageSync('token')
				},
				formData: {
					file: e.files[0]
				},
				success(response) {
					let data = JSON.parse(response.data)
					JSDfile.value = data.data.fullurl
				}
			})
		})
		// #endif

		//#ifndef  APP-PLUS	
		H5upload()
		//#endif
	}
	const H5upload = () => {
		uni.chooseFile({
			count: 1,
			complete(res) {
				uni.uploadFile({
					url: uploadUrl.uploadUrl,
					filePath: res.tempFilePaths[0],
					name: 'file',
					header: {
						'token': uni.getStorageSync('token')
					},
					formData: {
						file: res.tempFilePaths[0]
					},
					success(response) {
						let data = JSON.parse(response.data)
						JSDfile.value = data.data.fullurl
					}
				})
			}
		})
	}
	const previewFile = (url) => {
		// #ifdef  APP-PLUS
		plus.runtime.openURL(url, function(res) {});
		// #endif

		//#ifndef  APP-PLUS		
		window.open(url)
		//#endif
	}
	const submitJSD = ()=>{
		let list = [];
		let obj = {
			settleurl:JSDfile.value,
			settlement_id: info.purchase_inbound_id
		}
		list.push(obj)
		let data = {
			data: list
		}
		supplySettlement(data).then(res => {
			uni.showToast({
				title: '提交成功'
			})
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				})
			}, 300)
		})
	}
</script>

<style lang="scss">
	.item {
		margin: 20rpx 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		position: relative;

		.code {
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333;
			font-weight: bold;
		}

		.status {
			position: absolute;
			top: 80rpx;
			right: 30rpx;
			font-size: 28rpx;
			color: #ffc400;
		}

		.sure {
			position: absolute;
			bottom: 30rpx;
			right: 30rpx;
			font-size: 24rpx;
			background-color: #ffc400;
			padding: 8rpx 20rpx;
			border-radius: 8rpx;
		}

		.iconbox {
			justify-content: flex-start;
			gap: 10rpx;

			.icon {
				font-size: 40rpx;
				color: #ff6700;
				font-weight: normal;
			}
		}

		.list {
			width: 100%;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #333;

			.name {
				display: inline-block;
				width: 200rpx;
				text-align: right;
				margin-right: 30rpx;
			}
		}

		.iptbox {
			display: flex;
			justify-content: flex-start;

			input {
				width: 300rpx;
				border: 2rpx solid #f7f7f7;
				padding: 6rpx 20rpx;
			}
		}

		.imgbox {
			margin-top: 20rpx;
			font-size: 28rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 20rpx;

			.file {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 10rpx 0;
			
				.url {
					width: 500rpx;
					font-size: 24rpx;
					color: #f6bf00;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			
				.btn {
					width: 120rpx;
					height: 60rpx;
					font-size: 24rpx;
					line-height: 60rpx;
					text-align: center;
					background-color: #f6bf00;
				}
			}
		}

		.upload {
			width: 220rpx;
			height: 220rpx;
			border: 2rpx solid #f7f7f7;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			margin-top: 30rpx;
		}

		.file {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10rpx 0;
		
			.url {
				width: 400rpx;
				font-size: 24rpx;
				color: #f6bf00;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		
			.btn {
				width: 120rpx;
				height: 60rpx;
				font-size: 24rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: #f6bf00;
				margin: 0;
			}
		}
	}

	.btnbox {
		width: 100%;
		margin: 60rpx 0;
		display: flex;
		justify-content: space-around;
		padding-bottom: 60rpx;

		.btn {
			width: 180rpx;
			height: 60rpx;
			background-color: #fff;
			line-height: 60rpx;
			text-align: center;
			border-radius: 12rpx;
			font-size: 28rpx;
		}

		.search {
			background-color: #ffc400;
		}
	}
</style>